/*
    使用webpack构建vue3
    tsc --init 创建tsconfig.json文件
    安装webpack和webpack-cli pnpm

    安装启动dev的环境 webpack-dev-server
    安装html-webpack-plugin

    配置好后，安装 vue3, 添加声明文件
    安装 vue-loader和 @vue/compiler-sfc 让webpack识别 <template> 这种模板的 .vue文件
    安装 clean-webpack-plugin 每次打包先清空 dist目录
    安装 css-loader \ style-loader 解析css样式 如果要解析 .less 或sass 要装 less-loader 或 sass-loader 
    安装 ts-loader 解析 ts 语法，主要是为了模板中的 <script setup lang="ts"> 这里可以加上 lang="ts"

    安装friendly-errors-webpack-plugin 插件美化 webpack的控制台信息的输出
 */

// 智能提示
const {Configuration} = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

/**
 * 注解的方式开启智能提示
 * @type {Configuration}
 */
const config = {
    mode: "development",
    entry: '/src/main.ts',
    output: {
        filename: '[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,        // 配置.vue后缀的文件使用 vue-loader
                use: "vue-loader"
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                options: {
                    configFile: path.resolve(process.cwd(), 'tsconfig.json'),
                    appendTsSuffixTo: [/\.vue$/]  // 配置一下只针对vue的单文件组件
                }
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        extensions: ['.vue', '.ts', 'js']   // 补全后缀
    },
    devServer: {
        port: 9000
    },
    stats: "errors-only",     // 控制台只输出错误信息
    plugins: [  // 注册一下
        new htmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(), 
        new CleanWebpackPlugin(),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: ['You appliction running: http://localhost: 8080']
            }
        })
    ]
}

module.exports = config
